<template>
  <div class="flex flex-col flex-1">
    <div class="flex items-center h-66 text-grey">
      <p class="font-28 flex-1 flex items-center justify-center h-66 buy-item"
        :class="currentType == 'open' ? 'open' : ''" @click="changeTab('open')">{{ $t('买入') }}</p>
      <p class="font-28 flex-1 flex items-center justify-center h-66 buy-item"
        :class="currentType == 'close' ? 'close' : ''" @click="changeTab('close')">{{ $t('卖出') }}</p>
    </div>

    <div class="mt-22 mb-22 inputBackground" style="background-color: #191919 !important;position:relative;">
      <div class=" flex justify-between  items-center w-full h-70" @click="selectBtn">
        <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
        <div class="pl-16 textColor" style="width:80%;color: #fff !important;">{{ title }}</div>
        <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
      </div>
      <div class="option-box" v-if="isShow">
        <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">{{ item.title }}
        </div>
      </div>
    </div>
    <div class="h-70 lh-70  inputBackground mb-25 flex justify-center px-16 textColor2"
      style="background-color: #191919 !important;">
      <input placeholder="" class="targetPrice  w-full  h-70 border-none" v-model="form.price"
        :disabled="type / 1 === 1" />
      <span>USDT</span>
    </div>
    <div class="h-70 lh-70  inputBackground mb-25 flex justify-center px-16 textColor2"
      style="background-color: #191919 !important;">
      <span>{{ title }}</span>
    </div>
    <div class="flex total-list">
      <div class="total-div" :class="[!isTotal ? 'active-bg' : '']" @click="checkIsTotal(false)">
        {{ $t('数量') }}
      </div>
      <div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">
        {{ $t('总额') }}
      </div>
    </div>
    <div class="slider-container">
      <vue-slider
        v-model="percentageVal"
        :marks="{
          0: '',
          25: percentageVal == 25 ? '25%' : '',
          50: percentageVal == 50 ? '50%' : '',
          75: percentageVal == 75 ? '75%' : '',
          100: percentageVal == 100 ? '100%' : ''
        }"
        :included="true"
        :step="25"
        :min="0"
        :max="100"
        :process-style="{ backgroundColor: '#fff', height: '4px' }"
        :rail-style="{ backgroundColor: '#191919', height: '4px' }"
        @change="exchangeVal">
        <template v-slot:step="{ active }">
          <div :class="['custom-step', { active }]"></div>
        </template>
      </vue-slider>
    </div>
    <div v-if="!isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16"
      style="background-color: #191919 !important;">
      <input :placeholder="$t('数量')" class=" w-full h-70 border-none textColor" v-model="form.volume"
        @input="onInput" />
      <span class="textColor">{{ symbol.toLocaleUpperCase() }}</span>
    </div>
    <div v-if="isTotal" class="h-70 lh-70 inputBackground  mb-36 flex justify-center px-16"
      style="background-color: #191919 !important;">
      <input :placeholder="$t('总额')" class=" w-full h-70 border-none textColor" v-model="form.total"
        @input="onInputTotal" />
      <span class="textColor">{{ 'USDT' }}</span>
    </div>
    <!-- <vue-slider v-bind="options" v-model="form.volume"  :interval="interval"></vue-slider> -->
    <!-- <vue-slider class="mainBox"  v-bind="options" :interval="interval"  v-model="form.volume" :hide-label="true"  :railStyle="{ background: '#404040', height: '10px' }"
      :processStyle="{ background: '#266BFF', height: '10px' }">
      <template v-slot:step="{ active }">
        <div :class="['custom-step', { active }]"></div>
      </template>
</vue-slider> -->

    <div class="flex justify-between items-center mt-40">
      <div class="flex flex-col font-24">
        <p class="text-grey" v-if="this.currentType === 'open'">{{ $t('可用') }}</p>
        <p class="text-grey" v-else>{{ $t('可卖') }}</p>
      </div>

      <div style="display: flex;align-items: center;">
        <span class="ml-8">
          {{ initOpen.volume | nan }}&nbsp;USDT</span>
        <!-- <p class="text-grey" v-if="this.currentType !== 'open'">
          <span class="textColor ml-8">{{ initClose.volume | nan }}&nbsp;{{ symbol.toLocaleUpperCase() }}</span>
        </p> -->
        <van-icon name="add-o" @click="$router.push('/exchange/exchangePage')" class="font-30 add-icon" />
      </div>
      <!-- <img @click="$router.push('/exchange/exchangePage')" src="@/assets/image/public/switch.png" class="w-24 h-24" /> -->
    </div>
    <div style="" class="w-full h-90 lh-90 flex justify-center text-white text-center rounded buyandSell mt-70"
      :class="currentType === 'open' ? 'bg-red' : 'bg-green'" @click="order()">
      {{ currentType == 'open' ? $t('买入') : $t('卖出') }}
    </div>

  </div>
</template>

<script>
import config from "@/config";
import { Popup, Tabs, Tab } from 'vant';
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
import { _getBalance } from '@/API/trade.api'
import TradeApi from "@/API/trading.js";
import { mapGetters } from "vuex";
// import PopupConfirmOrder from '@/components/popup-confirm-order'
export default {
  name: "perpetualPosition",
  components: {
    VueSlider,
    [Popup.name]: Popup,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab
  },
  props: {
    symbol: {
      type: String,
      default: ''
    },
    price: {
      type: [Number, String],
      default: '0.00'
    },
    initOpen: {
      type: Object,
      default() {
        return {}
      }
    },
    initClose: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  computed: {
    ...mapGetters('user', ['userInfo'])
  },
  activated() {
    this.selectData = [
      { title: this.$t('市价委托'), type: '1' },
      { title: this.$t('限价委托'), type: '2' },
    ]
    this.resetData();
  },
  watch: {
    initOpen: { // 处理滚动条初始值
      deep: true,
      handler(val) {
        console.log(val)
        if (val.volume / 1 > 0) {
          this.handleInitSliderOption()
        }
      }
    },
    initClose: { // 处理滚动条初始值
      deep: true,
      handler(newVal, oldVal) {
        if (newVal.volume / 1 > 0) {
          this.handleInitSliderOption(true)
        }
      }
    },
    price(val) {
      if (this.type === '1') { // !this.focus &&
        this.form.price = val
      }
    },
    symbol(newVal) {
      this.resetData();
    }
  },
  filters: {
    nan(val) {
      return isNaN(val) ? '--' : val
    }
  },
  data() {
    return {
      options: config.sliderOptions,
      value: 0,
      isShow: false,
      title: this.$t('市价委托'),
      selectData: [],
      form: {
        volume: '',
        session_token: '',
        symbol: '', // 币种
        price: '',
        total: '',
        order_price_type: 'opponent', // 市价or限价
      },
      type: "1",//选中市价或限价类型
      currentType: "open", //开仓类型
      interval: 0.001,
      marks: (val) => val % 25 === 0,
      isTotal: false,
      percentageVal: 0
    }
  },
  mounted() {

  },
  methods: {
    checkIsTotal(val) {
      this.isTotal = val
      this.percentageVal = 0
      this.form.total = ''
      this.form.volume = ''
    },
    exchangeVal(val) {
      this.percentageVal = val
      if (!this.isTotal) {
        if (this.currentType == 'open') {
          let sum = (parseFloat(this.initOpen.volume) * (val / 100) / parseFloat(this.form.price))
          this.form.volume = Math.floor(sum * 100000) / 100000
        } else {
          let sum = parseFloat(this.initClose.volume)
          this.form.volume = (Math.floor(sum * (val / 100) * 100000)) / 100000
        }
      } else {
        if (this.currentType == 'open') {
          this.form.total = this.initOpen.volume * (val / 100)
        } else {
          this.form.total = Math.floor((this.initClose.volume * (val / 100) * parseFloat(this.form.price)) * 1000) / 1000
        }
      }
    },
    handleInitSliderOption(volume) {
      if (!volume) { // 金额是否需要变动
        this.form.volume = ''
      }
      console.log(this.initOpen.volume)
      let vol
      if (this.currentType === 'open') {
        vol = this.initOpen.volume / 1
      } else {
        vol = this.initClose.volume / 1
      }
      this.options.max = Number(vol.toFixed(3))
      if (this.options.max > 0) {
        this.options.disabled = false
      } else {
        this.options.disabled = true
      }
    },
    onInput() { // 数量变化
      if (this.currentType === 'open') {
        let maxSum = (parseFloat(this.initOpen.volume) / parseFloat(this.form.price))
        console.log(this.initOpen.volume)
        console.log(this.form.price)
        console.log(maxSum)
        if (this.form.volume * 1 > maxSum / 1) {
          this.form.volume = maxSum
        }
      } else {
        if (this.form.volume * 1 / 1 > this.options.max / 1) {
          this.form.volume = this.options.max / 1
        }
      }
    },
    onInputTotal() { //总额变化
      //最大额度
      if (this.form.total > 0) {
        if (this.currentType === 'open') {
          console.log(this.initOpen.volume)
          if (this.form.total * 1 > this.initOpen.volume * 1) {
            this.form.total = this.initOpen.volume
          }
        } else {
          let sum = (parseFloat(this.form.total) / parseFloat(this.form.price)).toFixed(5)
          if (parseFloat(sum) > parseFloat(this.initClose.volume)) {
            this.form.total = (parseFloat(this.initClose.volume) * parseFloat(this.form.price)).toFixed(5)
          }
        }
      }
    },
    //价格类型下拉框切换
    selectBtn() {
      this.isShow = !this.isShow;
    },
    //选择价格类型
    selectItem(item) {
      if (item.type == 1) {
        this.form.price = this.price
      }
      this.form.order_price_type = item.type === '1' ? 'opponent' : 'limit'
      this.title = item.title;
      this.type = item.type;
      this.isShow = false;
    },
    //选择开仓类型
    changeTab(type) { // 开仓和
      this.percentageVal = 0
      this.isTotal = false
      this.form.total = ''
      console.log('changeTab', type)
      // TODO: 这里应该是换函数
      // this.form.direction = type === 'open' ? 'buy' : 'sell'
      if (this.currentType === type) {
        return
      }
      this.currentType = type;
      if (this.currentType === 'close') {
        this.$emit('ordered', 'close') // 更新平仓初始化参数
      } else {
        this.$emit('ordered', 'open') // 更新平仓初始化参数
      }
      this.handleInitSliderOption()
    },
    order() {
      if (!this.userInfo.token) {
        this.$router.push('/login')
        return
      }
      let volume = ''
      let numReg = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
      if (this.isTotal) {
        if (!this.form.total) {
          this.$toast.fail(this.$t('请输入总额'))
          return
        }
        if (!numReg.test(this.form.total)) {
          this.$toast(this.$t('请输入数字'));
          return;
        }
        if (this.currentType === 'open') {
          this.form.volume = parseFloat(this.form.total).toFixed(5)
        } else {
          this.form.volume = (parseFloat(this.form.total) / parseFloat(this.form.price))
          this.form.volume = this.form.volume.toFixed(5)
        }
        volume = this.form.volume
      } else {
        if (!numReg.test(this.form.volume)) {
          this.$toast.fail(this.$t('请输入数量'))
          return
        }
        if (this.currentType === 'open') {
          volume = (parseFloat(this.form.volume) * parseFloat(this.form.price))
        } else {
          volume = this.form.volume
        }
      }
      // this.form.symbol = this.$route.params.symbol
      this.form.symbol = this.symbol;
      let _order = null // api
      let emitFunc = null // 触发函数

      if (this.currentType === 'open') {
        this.form.session_token = this.initOpen.session_token
      } else {
        this.form.session_token = this.initClose.session_token
      }
      _order = this.currentType === 'open' ? TradeApi.tradeBuy : TradeApi.tradeSell
      emitFunc = this.currentType
      _order({
        volume: volume,
        session_token: this.form.session_token,
        symbol: this.form.symbol, // 币种
        price: this.form.price,
        total: this.form.total,
        order_price_type: this.form.order_price_type, // 市价or限价
      }).then((res) => {
        this.$toast(this.$t('操作成功'))
        this.form.volume = ''
        this.form.total = ''
        _getBalance().then(data => { // 刷新余额
          this.$store.commit('user/SET_USERINFO', { balance: data.money })
        })
        this.$emit('ordered', emitFunc)
      }).catch(() => { // 也需要重新初始化
        this.$emit('ordered', emitFunc)
      })
    },
    // 切换币种还原下拉内容
    resetData() {
      this.title = this.selectData[0].title;
      this.type = this.selectData[0].type;
      this.form.order_price_type = 'opponent'
    }
  }

}
</script>

<style lang="scss" scoped>
.text-grey {
  background-color: #191919 !important;
  border-radius: 99px;
}

.bg-f3 {
  background: #f3f3f3;
}

.options {
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
  border-radius: 6px;

  div {
    font-size: 22px;
    text-align: center;
    width: 140px;
    height: 60px;
    line-height: 60px;

    &.option-active {
      background-color: #F5F5F5;
    }
  }
}

.inputBackground {
  background-color: red !important;
}

.right-word {
  top: 50%;
  transform: translateY(-50%);
  right: 19px;
  position: absolute;
  border-radius: 6px;
}

.vue-slider {
  height: 3px !important;
  padding: 0 10px !important;
}

.vue-slider-dot {
  width: 28px !important;
  height: 28px !important;
}

.vue-slider-mark-label {
  font-size: 16px;
  margin-top: 14px !important;
}

.vue-slider-mark-label-active {
  color: #868D9A !important;
}

/deep/ .vue-slider-dot-handle {
  background-color: #000000 !important;
  transform: translate(-2px, -5px);
  width: 35px !important;
  height: 35px !important;
  border: 2px solid #fff;
}

.vue-slider-mark {
  width: 20px !important;
  height: 20px !important;

  &:nth-child(1) {
    .vue-slider-mark-label {
      transform: translateX(-14px) !important;
    }
  }

  &:nth-child(5) {
    .vue-slider-mark-label {
      transform: translateX(-60px) !important;
    }
  }
}

// 开仓样式
.tabcon {
  // padding-bottom: 16%;
  position: relative;
  height: 80px;
}

.tab {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: flex;
  align-items: center;
  background-color: #f3f3f3;
  border-radius: 5px;
  overflow: hidden;
}

.tab>* {
  height: 100%;
}

.tab>img {
  margin-left: -2px;
  margin-right: -2px;
}

.tab>a {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.open {
  // background-color: #2EBD85;
  background: #eb4b6d;
  color: white;
  border-radius: 99px;
}

.close {
  // background-color: #F6465D;
  background: #31bd65;
  color: white;
  border-radius: 99px;
}

// 下拉
.option-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 90px;
  width: 100%;
  z-index: 3;

  @include themify() {
    background: themed("grey_bg");
  }

  text-align: center;

  @include themify() {
    box-shadow: 0px 0px 3px 3px themed("grey_bg");
  }

  border-radius: 4px;

  @include themify() {
    color: themed("text_color3");
  }
}

.option-box>div {
  padding: 30px 0;
}

.option-box>div:hover {
  // background-color: #F5F5F5;
}

.num-text-color {
  color: #4C4A54;
}

select {
  appearance: none;
  /* 去掉默认图标 */
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  padding: 0 20px 0 20px;
  background: url("../../assets/image/public/grey-select.png") no-repeat scroll right center transparent;
  /* 自己的图*/
  background-size: 20px 11px;
}

.with100 {
  width: 100%;
}

.height100 {
  height: 100%;
}

.targetPrice {

  opacity: 1;
}

.inputBackground {
  border-radius: 10px;
  input {
    background: red !important;
  }
}


.custom-step {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  // border: solid 1px #fff;
  background: #212121;
  transform: translateY(-6px);
}

.custom-step.active {
  box-shadow: 0 0 0 2px #fff;
  background-color: #000000;
  transform: translate(-5px, -6px);
}

.tab-item {
  display: flex;
  align-items: center;
  justify-content: center;

  @include themify() {
    background: themed("input_background");
  }

  border-radius: 4px;
  margin-right: 10px;
  padding: 10px 0;
}

.total-list {
  @include themify() {
    background: themed("grey_bg");
  }

  display: flex;

  @include themify() {
    color: themed("text_color");
  }

  font-size: 26px;
  align-items: center;
  justify-content: center;
  // margin-bottom: 20px;
  position: relative;

  // ::after {
  //   position: absolute;
  //   content: '';
  //   top: 20%;
  //   left: 50%;
  //   height: 40px;
  //   background: #373737;
  //   width: 1px;

  // }

  .total-div {
    flex: 1;
    text-align: center;
    padding: 20px 0;
    background-color: #191919;
  }
}

.add-icon {
  color: #fff;
  margin-left: 10px;
}

.active-bg {
  @include themify() {
    background: themed("bg_dark");
  }
}

.select-active {
  background: #2EBD85;

  @include themify() {
    color: themed("text_color") !important;
  }
}

.buyandSell {
  position: relative;
  z-index: 9;
  border-radius: 99px;
}

.slider-container {
  padding: 20px 10px;
  margin: 15px 0;
  // margin-bottom: 45px;

  :deep(.vue-slider) {
    height: 4px;

    .vue-slider-mark {
      width: 100%;
      height: 100%;

      .vue-slider-mark-step {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #212121;
        transform: translateY(-8px);
      }

      .vue-slider-mark-label {
        font-size: 24px;
        color: #868D9A;
        margin-top: 16px;
      }
    }

    .vue-slider-dot-handle {
      width: 20px;
      height: 20px;
      border: solid 2px #fff;
      background-color: #000000;
      border-radius: 50%;
      transform: translateY(-8px);
    }

    .custom-step.active {
      box-shadow: 0 0 0 2px #fff;
      background-color: #000000;
    }
  }
}

/deep/ .vue-slider-dot-tooltip-inner{
  display: none;
}
</style>
